<template>
    <div class="myChart">
        <span
            style="color:white;font-size: 14px;font-weight: bold;font-style: italic;letter-spacing: 2px;margin-left: 10%;">报警识别管控</span>
        <img src="../../assets/images/divide.png" alt="" style="width: 100%;">
        <div style="height: 80%;">
            <div class="box-outer" style="">
                <svg-icon icon-class="alarm" style="fill: red;position: absolute;"></svg-icon>
                <span class="label">一级预警</span>
                <div class="line"></div>
                <div class="box-top">{{ data['一级报警'] }}</div>
                <div class="box-bottom">{{ total>0?(data['一级报警']/total*100).toFixed(2):0 }}%</div>
            </div>
            <div class="box-outer">
                <svg-icon icon-class="alarm" style="fill: yellow;position: absolute;"></svg-icon>
                <span class="label">二级预警</span>
                <div class="line"></div>
                <div class="box-top">{{ data['二级报警'] }}</div>
                <div class="box-bottom">{{ total>0?(data['二级报警']/total*100).toFixed(2):0 }}%</div>
            </div>
        </div>
        <img src="../../assets/images/left-bottom.png" alt="" style="position: absolute;left: 0;bottom: 0;">
    </div>
</template>

<script>
import { alarmCount } from '../../api/oil/statistic';
import DateTool from '../../utils/DateTool';
export default {
    name: 'AlarmCount',
    data() {
        return {
            data: [],
            total: 0
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            var params = {
                startDate: '2021-01-01',
                endDate: DateTool.now()
            };
            alarmCount(params).then(res => {
                this.total = 0;
                var data = res.data;
                // console.log(data);
                this.data = data.reduce((acc, cur) => {
                    this.total += cur.alarm_count;
                    acc[cur.alarm_level] = cur.alarm_count;
                    return acc;
                }, {});
                // console.log(this.data);
            });
        }
    },
    mounted() {
        this.getData();
    }
};
</script>

<style scoped>
.box-outer{
    display: inline-block;width: 50%;height: 100%;position: relative;align-content: center;
    color: white;
    
    .label{       
        line-height: 40px;
        padding-bottom: 5px;
        border-bottom: solid 1.5px #285db7;
    }

    .line{
    margin-left: 5%;
    vertical-align: middle;
    display: inline-block;
    width: 10%;
    height: 25%;
    border-top: 2px solid #194185;
    border-right: transparent;
    border-bottom: 2px solid #194185;
    border-left: 2px solid #194185;
    border-image: initial;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    }

    .box-top {
    position: absolute;
    right: 20%;
    top: 31%;
    width: 30%;
    height: 15%;
    display: inline-block;
    background-color: #326ed7;
    text-align: center;
    }

    .box-bottom {
    position: absolute;
    right: 20%;
    top: 56%;
    width: 30%;
    height: 15%;
    display: inline-block;
    background-color: #326ed7;
    text-align: center; 
    }
}
</style>